import {Image, StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect} from "react";
import {clearStorage} from "@/utils";
import {useDispatch} from "react-redux";
import {loginOut, resetState} from "@/store/slices/loginSlice"
import {showToast} from "@/utils/rootToast";
import {postLoginOut} from "@/services/login";


export default function settingScreen() {

    const router = useRouter();

    const dispatch = useDispatch();

    useEffect(() => {
        // goAbout();
        // goPrivacyAgreement();
    });

    const goAccount = () => {
        router.push("/setting/account");
    };

    const goNotice = () => {
        router.push("/setting/notice");
    };

    const goAbout = () => {
        router.push("/setting/about");
    };

    const goUserAgreement = () => {
        router.push("/setting/userAgreement");
    };

    const goPrivacyAgreement = () => {
        router.push("/setting/privacyAgreement");
    };

    const loginOutBtn = () => {
        postLoginOut()
            .then(res => {
                dispatch(loginOut());
                router.push("/")
                showToast("退出登陆成功!");
            })
        // clearStorage();

    };



    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '设置', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.settingWrap}>
                <TouchableOpacity onPress={goAccount}>
                    <View style={styles.settingItem}>
                        <Text style={styles.settingText}>账号安全</Text>
                        <AntDesign name="right" size={12} color="#9C9EAC" />
                    </View>
                </TouchableOpacity>
               <TouchableOpacity onPress={goNotice}>
                   <View style={[styles.settingItem, styles.cleanBom]}>
                       <Text style={styles.settingText}>通知设置</Text>
                       <AntDesign name="right" size={12} color="#9C9EAC" />
                   </View>
               </TouchableOpacity>
            </View>
            <View style={styles.settingWrap}>
                <TouchableOpacity onPress={goUserAgreement}>
                    <View style={styles.settingItem}>
                        <Text style={styles.settingText}>用户协议</Text>
                        <AntDesign name="right" size={12} color="#9C9EAC" />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goPrivacyAgreement}>
                    <View style={styles.settingItem}>
                        <Text style={styles.settingText}>隐私协议</Text>
                        <AntDesign name="right" size={12} color="#9C9EAC" />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={goAbout}>
                    <View style={styles.settingItem}>
                        <Text style={styles.settingText}>关于我们</Text>
                        <AntDesign name="right" size={12} color="#9C9EAC" />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity>
                    <View style={[styles.settingItem, styles.cleanBom]}>
                        <Text style={styles.settingText}>鼓励一下</Text>
                        <AntDesign name="right" size={12} color="#9C9EAC" />
                    </View>
                </TouchableOpacity>
            </View>
            <TouchableOpacity onPress={loginOutBtn}>
                <View style={styles.loginOut}>
                    <Text style={styles.loginOutText}>退出登录</Text>
                </View>
            </TouchableOpacity>
        </View>

    );
}

const styles = StyleSheet.create({
    settingWrap: {
        marginTop: 14,
        width: scaleSize(351),
        marginLeft: 12,
        backgroundColor: "#fff",
        borderRadius: 10,
        paddingLeft: 15,
        paddingRight: 15,
    },
    settingItem: {
        flexDirection: "row",
        height: 48,
        alignItems: "center",
        justifyContent: "space-between",
        borderBottomWidth: 0.5,
        borderBottomColor: "#E4E6EC"
    },
    cleanBom: {
        borderBottomWidth: 0
    },
    settingText: {
        fontSize: 14,
        color: "#2A2B30"
    },
    loginOut: {
        width: scaleSize(351),
        marginLeft: 12,
        height: 44,
        backgroundColor: "#fff",
        borderRadius: 10,
        marginTop: 80

    },
    loginOutText: {
        textAlign: "center",
        lineHeight: 44,
        fontSize: 14,
        color: "#333",
        // fontWeight: "bold"
    },
});
